<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="工单号" prop="workOrderNo">
        <el-input v-model="formData.workOrderNo" placeholder="请输入工单号" />
      </el-form-item>
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="formData.orderNo" placeholder="请输入订单号" />
      </el-form-item>
      <el-form-item label="源订单" prop="sourceOrder">
        <el-input v-model="formData.sourceOrder" placeholder="请输入源订单" />
      </el-form-item>
      <el-form-item label="销售订单" prop="salesOrder">
        <el-input v-model="formData.salesOrder" placeholder="请输入销售订单" />
      </el-form-item>
      <el-form-item label="工单日期" prop="workOrderDate">
        <el-date-picker
          v-model="formData.workOrderDate"
          type="date"
          value-format="x"
          placeholder="选择工单日期"
        />
      </el-form-item>
      <el-form-item label="承诺交期" prop="promisedDelivery">
        <el-date-picker
          v-model="formData.promisedDelivery"
          type="date"
          value-format="x"
          placeholder="选择承诺交期"
        />
      </el-form-item>
      <el-form-item label="下发时间" prop="issueTime">
        <el-date-picker
          v-model="formData.issueTime"
          type="date"
          value-format="x"
          placeholder="选择下发时间"
        />
      </el-form-item>
      <el-form-item label="开工时间" prop="startProductionTime">
        <el-date-picker
          v-model="formData.startProductionTime"
          type="date"
          value-format="x"
          placeholder="选择开工时间"
        />
      </el-form-item>
      <el-form-item label="产品品号" prop="productCode">
        <el-input v-model="formData.productCode" placeholder="请输入产品品号" />
      </el-form-item>
      <el-form-item label="规格" prop="specification">
        <el-input v-model="formData.specification" placeholder="请输入规格" />
      </el-form-item>
      <el-form-item label="BOM版次" prop="bomVersion">
        <el-input v-model="formData.bomVersion" placeholder="请输入BOM版次" />
      </el-form-item>
      <el-form-item label="图号" prop="drawingNo">
        <el-input v-model="formData.drawingNo" placeholder="请输入图号" />
      </el-form-item>
      <el-form-item label="工单数量" prop="workOrderQuantity">
        <el-input v-model="formData.workOrderQuantity" placeholder="请输入工单数量" />
      </el-form-item>
      <el-form-item label="工单状态" prop="workOrderStatus">
        <el-select v-model="formData.workOrderStatus" placeholder="请选择工单状态">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.OPTICORE_WORKORDER_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="完成数量占比" prop="completedPercentage">
        <el-input v-model="formData.completedPercentage" placeholder="请输入完成数量占比" />
      </el-form-item>
      <el-form-item label="在制品数量" prop="inProcessQuantity">
        <el-input v-model="formData.inProcessQuantity" placeholder="请输入在制品数量" />
      </el-form-item>
      <el-form-item label="开工人员" prop="startProductionWorker">
        <el-input v-model="formData.startProductionWorker" placeholder="请输入开工人员" />
      </el-form-item>
      <el-form-item label="生产时长" prop="productionDuration">
        <el-input v-model="formData.productionDuration" placeholder="请输入生产时长" />
      </el-form-item>
      <el-form-item label="已完成数量" prop="completedQuantity">
        <el-input v-model="formData.completedQuantity" placeholder="请输入已完成数量" />
      </el-form-item>
      <el-form-item label="产线" prop="line">
        <el-input v-model="formData.line" placeholder="请输入产线" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { ExecuteReportApi, ExecuteReportVO } from '@/api/opticore/executereport'

/** 生产执行报 表单 */
defineOptions({ name: 'ExecuteReportForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  workOrderNo: undefined,
  orderNo: undefined,
  sourceOrder: undefined,
  salesOrder: undefined,
  workOrderDate: undefined,
  promisedDelivery: undefined,
  issueTime: undefined,
  startProductionTime: undefined,
  productCode: undefined,
  specification: undefined,
  bomVersion: undefined,
  drawingNo: undefined,
  workOrderQuantity: undefined,
  workOrderStatus: undefined,
  completedPercentage: undefined,
  inProcessQuantity: undefined,
  startProductionWorker: undefined,
  productionDuration: undefined,
  completedQuantity: undefined,
  line: undefined,
})
const formRules = reactive({
  workOrderQuantity: [{ required: true, message: '工单数量不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ExecuteReportApi.getExecuteReport(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ExecuteReportVO
    if (formType.value === 'create') {
      await ExecuteReportApi.createExecuteReport(data)
      message.success(t('common.createSuccess'))
    } else {
      await ExecuteReportApi.updateExecuteReport(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    workOrderNo: undefined,
    orderNo: undefined,
    sourceOrder: undefined,
    salesOrder: undefined,
    workOrderDate: undefined,
    promisedDelivery: undefined,
    issueTime: undefined,
    startProductionTime: undefined,
    productCode: undefined,
    specification: undefined,
    bomVersion: undefined,
    drawingNo: undefined,
    workOrderQuantity: undefined,
    workOrderStatus: undefined,
    completedPercentage: undefined,
    inProcessQuantity: undefined,
    startProductionWorker: undefined,
    productionDuration: undefined,
    completedQuantity: undefined,
    line: undefined,
  }
  formRef.value?.resetFields()
}
</script>